<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义标签示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* 语义标签样式区分 */
        header {
            background-color: #e6f7ff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        nav {
            background-color: #f5f5f5;
            padding: 10px 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        nav a {
            text-decoration: none;
            color: #333;
        }
        main {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        article {
            flex: 3;
            background-color: #fff;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        section {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ddd;
        }
        aside {
            flex: 1;
            background-color: #fff8e6;
            padding: 20px;
            border-radius: 8px;
        }
        footer {
            background-color: #f5f5f5;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
        }
        figure {
            margin: 20px 0;
        }
        figcaption {
            text-align: center;
            color: #666;
            font-size: 0.9em;
        }
        time {
            color: #666;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <!-- 页头：包含网站标题和介绍 -->
    <header>
        <h1>前端技术博客</h1>
        <p>分享HTML5、CSS3、JavaScript等前端技术知识</p>
    </header>


    <!-- 主要内容区：页面核心内容 -->
    <main>
        <!-- 文章：独立完整的内容（如博客文章） -->
        <article>
            <h2>HTML5语义标签的优势与应用</h2>
            <p>发布时间：<time datetime="2025-10-22">2025年10月22日</time></p>

            <!-- 章节：文章内的一个主题部分 -->
            <section>
                <h3>什么是HTML5语义标签？</h3>
                <p>HTML5语义标签是具有明确含义的标签（如&lt;header&gt;、&lt;article&gt;），相比传统的&lt;div&gt;（无含义），它们能让浏览器和开发者更清晰地理解内容结构。</p>
            </section>

            <section>
                <h3>为什么需要语义标签？</h3>
                <p>语义标签的核心价值在于「含义明确」：</p>
                <ul>
                    <li>提升SEO：搜索引擎可通过标签理解内容重要性（如&lt;h1&gt;比&lt;p&gt;更重要）。</li>
                    <li>增强可访问性：屏幕阅读器等辅助设备可通过标签为用户提供更精准的内容导航。</li>
                    <li>简化代码维护：开发者能快速通过标签名理解页面结构，降低协作成本。</li>
                </ul>
            </section>

        

            <section>
                <h3>常用语义标签推荐</h3>
                <p>除了示例中使用的标签，还有&lt;mark&gt;（标记文本）、&lt;details&gt;（可折叠内容）、&lt;summary&gt;（折叠内容标题）等实用标签。</p>
            </section>
        </article>

</body>
</html>